<template>
  <div class="home-box">
    <el-container class="home-container">
      <el-header class="header-box">
        <!-- <el-breadcrumb separator-icon="ArrowRight">
          <el-breadcrumb-item v-for="item in breadList" :key="item" :to="{path:item.path}">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb> -->
        <div class="title-box">
          <img :src="platformLogo" alt="">
          <span>{{ platformName }}</span>
        </div>
        <div class="header-icon-box">
          <!-- <el-popover placement="bottom" :width="200" trigger="click">
            <template #reference>
              <div>
                <img class="unactive" src="@a/icons/service.png" alt="">
                <img class="active" src="@a/icons/service-active.png" alt="">
                <span>客服</span>
              </div>
            </template>
            <div class="pop-box">
              <div>微信扫码咨询{{ serviceName || '' }}客服</div>
              <div><img style="width:100%" src="@/assets/imgs/u77.png" alt=""></div>
              <div v-show="servicePhone">客服联系电话：{{ servicePhone }}</div>
            </div>
          </el-popover>
          <div @click="toHelp">
            <img class="unactive" src="@a/icons/help.png" alt="">
            <img class="active" src="@a/icons/help-active.png" alt="">
            <span>帮助</span>
          </div> -->
          <!-- <div @click="toMsgMng">
              <img class="unactive" src="@a/icons/msg.png" alt="">
              <img class="active" src="@a/icons/msg-active.png" alt="">
              <el-badge :hidden="msgnoReadForm.count == 0" :value="msgnoReadForm.count">
                <span>消息</span>
              </el-badge>
            </div> -->
        </div>
        <div class="head-portrait">
          <el-avatar icon="UserFilled" />
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              欢迎您 {{ userInfo.name || '' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- <el-dropdown-item>Action 1</el-dropdown-item> -->
                <el-dropdown-item command="editpass">修改手机号</el-dropdown-item>
                <el-dropdown-item command="outLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside-box">
          <!-- <div class="title-box">{{ platformName }}</div> -->
          <el-menu ref="menu" :default-active="activeMenu" class="el-menu-vertical menu-box" :collapse-transition="true"
            background-color="#1C222A" text-color="#777b81" active-text-color="#ffffff" unique-opened :router="true">
            <template v-for="item in menuList">
              <!-- 有子集 -->
              <el-sub-menu :index="item.perms" :key="item.perms" v-if="item.children.length > 0 && item.type < 100"
                class="padding-l">
                <template #title>
                  <!-- <el-icon v-html="item.icon"></el-icon> -->
                  <span :title="item.name">{{ item.name }}</span>
                  <span class="badge" v-show="item.badge">{{ item.badge }}</span>
                </template>

                <!-- 有二级子集 -->
                <template v-for="subItem in item.children">
                  <el-sub-menu :key="subItem.perms" :index="subItem.perms" v-if="subItem.children.length > 0 && item.type < 100">
                    <template #title>
                      <span>{{ subItem.name }}</span>
                    </template>

                    <!-- 三级 -->
                    <template v-for="thrItem in subItem.children">
                      <el-menu-item :key="thrItem.perms" :index="thrItem.perms" v-if="thrItem.isShow && item.type < 100">
                        {{ thrItem.name }}
                      </el-menu-item>
                    </template>
                  </el-sub-menu>
                </template>

                <!-- 无二级子集 -->
                <template v-for="subItem in item.children">
                  <el-menu-item :key="subItem.perms" :index="subItem.perms"
                    v-if="subItem.children.length == 0 && item.type < 100">
                    <span style="margin-left:20px;">{{ subItem.name }}</span>
                    <span class="badge" v-show="subItem.badge">{{
                subItem.badge
                }}</span>
                  </el-menu-item>
                </template>
              </el-sub-menu>

              <!-- 无子集 -->
              <el-menu-item :key="item.perms" :index="item.perms" v-if="item.children.length == 0 && item.type < 100">
                <!-- <el-icon v-html="item.icon"></el-icon> -->
                <span>{{ item.name }}</span>
              </el-menu-item>

            </template>
          </el-menu>
        </el-aside>
        <el-main class="main-box">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed, onBeforeUnmount, onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { warningDeal } from '@/utils/utils'
import { useStateStore } from '@/store'
import api from './api'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStateStore()

    const state = reactive({
      platformName: computed(() => {
        return store.getPlatformName
      }),
      platformLogo: computed(() => {
        return store.getPlatformLogo
      }),
      servicePhone: computed(() => {
        return store.getServicePhone
      }),
      serviceName: computed(() => {
        return store.getServiceName
      }),
      activeMenu: '/welcome',
      breadList: [],
      menuList: [],
      menuIds: [],
      userInfo: {},
    })

    watch(() => route.matched, (newVal, oldVal) => {
      setBreadAndActive()
    })

    // 设置面包屑和菜单选中
    function setBreadAndActive() {
      const myArr = []
      const routeList = route.matched[route.matched.length - 1].path.split('/')
      state.activeMenu = '/' + routeList[1]
      route.matched.map(item => {
        if (item.path == '/home') return
        myArr.push(item)
      })
      state.breadList = myArr
    }

    function handleCommand(command) {
      switch (command) {
        case 'outLogin':
          api.companyQuit().then(res => {
            if (res.code == '200') {
              router.push({ path: '/' })
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
          break
        case 'editpass':
          router.push({ path: '/changePass' })
          break
      }
    }

    function toMsgMng() {
      router.push({ path: '/msgMng' })
    }

    function toHelp() {
      window.open('https://jihehao.yilianyun.top/distribution/help.html', '_blank')
    }

    function tabRecursive(list) {
      list && list.map(item => {
        state.menuIds.push(item.menuId)
        if (item.children && item.children.length > 0) {
          tabRecursive(item.children)
        }
      })
    }

    onMounted(() => {
      state.menuIds = []
      const myMenuList = window.localStorage.getItem('JHH_USER_MENU')
      state.menuList = JSON.parse(myMenuList)
      state.userInfo = JSON.parse(window.localStorage.getItem('JHH_USER_INFO'))
      tabRecursive(state.menuList)
      store.setMenuIds(state.menuIds)
      setBreadAndActive()
      window.addEventListener('storage', event => {
        if (event.key === 'JHH_USER_INFO') {
          state.userInfo = JSON.parse(event.newValue)
        }
      })
    })

    return {
      ...toRefs(state),
      handleCommand,
      toMsgMng,
      toHelp,
    }
  }
}
</script>

<style lang="scss" scoped>
.home-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .home-container {
    width: 100%;
    height: 100%;
  }
}
.title-box {
  text-align: center;
  color: #dddee0;
  font-weight: bold;
  font-size: 20px;
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  > img {
    height: 50px;
  }
}
:deep(.el-menu) {
  flex-grow: 1;
  border-right: none;
  .el-menu-item {
    height: 40px;
    padding: 0 !important;
    padding-left: 30px !important;
    &:hover {
      background-color: #44a5ff !important;
      color: #ffffff !important;
    }
  }
  .el-sub-menu__title {
    padding: 0 !important;
    padding-left: 30px !important;
    background-color: #1c222a !important;
  }
  .el-menu--inline {
    background-color: #14171e !important;
  }
  .is-active {
    color: #ffffff !important;
    background-color: #0081ff !important;
  }
}
.aside-box {
  width: 200px;
  display: flex;
  flex-flow: column;
}
.header-box {
  display: flex;
  align-items: center;
  background-color: #232b37;
  .header-icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    > div {
      display: flex;
      align-items: center;
      color: #737373;
      font-size: 14px;
      gap: 3px;
      cursor: pointer;
      > img {
        height: 16px;
      }
      &:hover {
        color: #0081ff;
        > .unactive {
          display: none;
        }
        > .active {
          display: block;
        }
      }
      .unactive {
        display: block;
      }
      .active {
        display: none;
      }
    }
  }
  .head-portrait {
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
}
.main-box {
  height: calc(100vh - 60px);
  background-color: #f1f4f7;
}
.pop-box {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
</style>